<template>
  <div class="box">
    <div class="filter">
      <Back :title="$t('Logs_logDetail')"></Back>
      <el-form ref="form" :model="filter" label-width="120px" style="margin-top: 20px">
        <el-form-item :label="$t('Logs_autoRefreshLog')">
          <el-switch v-model="autoRefresh"></el-switch>
          <span class="tishi">{{$t('Logs_invalidAfterClosed')}}</span>
        </el-form-item>
        <el-form-item :label="$t('Logs_nextLine')">
          <el-switch v-model="filter.wrapLines"></el-switch>
        </el-form-item>
        <el-form-item :label="$t('Logs_showTimestamp')">
          <el-switch v-model="filter.Timestamp"></el-switch>
        </el-form-item>
        <el-form-item :label="$t('Logs_get')">
          <el-select v-model="filter.filterTime" :placeholder="$t('Logs_plsSelectGetTime')">
            <el-option :label="$t('Logs_allLogs')" value="all"></el-option>
            <el-option :label="$t('Logs_lastDay')" :value="24*60*60"></el-option>
            <el-option :label="$t('Logs_last4hours')" :value="4*60*60"></el-option>
            <el-option :label="$t('Logs_last1hour')" :value="1*60*60"></el-option>
            <el-option :label="$t('Logs_allLogs')" :value="10*60"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('Logs_maximumItemsDisplayed')">
          <el-input v-model="filter.num" :placeholder="$t('Logs_plsInput')" type="Number"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Logs_operation')">
          <el-button size="small" style="background: #067FB5; color: #fff;" icon="el-icon-document-copy" :data-clipboard-text="logData" class="copyAll" @click="copyAll">
            {{ $t('Logs_Copyall') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content" v-if="logData">
      <textarea v-model="logData" disabled></textarea>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Switch, Select, Option, Input, Button } from 'element-ui'
import http from '@/utils/http'
import Clipboard from 'clipboard'
import Back from '@/components/Back'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)

export default {
  data () {
    return {
      logData: null, // 日志数据
      autoRefresh: true, // 是否自动刷新
      filter: { // 用于筛选日志的数据
        wrapLines: true, // 是否换行
        Timestamp: false, // 是否获取时间
        filterTime: 'all', // 截至时间
        num: 100 // 最多显示的条数
      }
    }
  },
  watch: {
    // 监听是否自动获取数据，false将关闭定时器，true将重启定时器
    autoRefresh: function () {
      if (!this.autoRefresh) {
        clearInterval(this.timeinit)
      } else {
        this.fetchLogs()
      }
    }
  },
  mounted () {
    // 进入页面首次获取日志
    const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/logs?since=0&stderr=1&stdout=1&tail=${this.filter.num}&timestamps=${this.filter.Timestamp}"`
    // post({ docker }, (res) => {
    //   this.logData = res
    // }, this)
    http({
      url: '/docker',
      method: 'POST',
      timeout: 2000000,
      data: { docker }
    }).then(res => {
      if (res.Data === '') {
        this.logData = this.$t('Logs_nolog')
      } else {
        this.logData = res.Data
      }
    })
    this.fetchLogs()
  },
  methods: {
    // 自动获取日志
    fetchLogs () {
      this.timeinit = setInterval(() => {
        let time = 0
        if (this.filter.filterTime !== 'all') {
          let datatime = Date.parse(new Date()) / 1000
          time = datatime - this.filter.filterTime
        }
        const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/containers/${this.$route.params.id}/logs?since=${time}&stderr=1&stdout=1&tail=${this.filter.num}&timestamps=${this.filter.Timestamp}"`
        http({
          url: '/docker',
          method: 'POST',
          timeout: 2000000,
          data: { docker }
        }).then(res => {
          if (res.Data === '') {
            this.logData = this.$t('Logs_nolog')
          } else {
            this.logData = res.Data
          }
        })
      }, 3000)
    },
    // 复制全部
    copyAll () {
      const clipboard = new Clipboard('.copyAll')
      clipboard.on('success', e => {
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
      // 不支持复制
        alert(this.$t('Logs_unsupportAutoDuplicate'))
        // 释放内存
        clipboard.destroy()
      })
    }
  },
  components: {
    Back
  },
  // 离开页面销毁定时器
  beforeDestroy () {
    clearInterval(this.timeinit)
    this.timeinit = null
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-top: 20px;
  border-radius: 10px;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  padding: 20px;
}
.tishi{
  font-size: 12px;
  color: #ccc;
  margin-left: 20px;
}
textarea{
    width: 100%;
    height: 400px;
  }
</style>
